import React, { useState } from "react";
import { Search, Tag, Space } from "react-vant";
import "./style.css";
import axios from "axios";
const Search1 = () => {
  const [searchHistoryList, setSearchHistoryList] = useState(
    JSON.parse(localStorage.getItem("searchHistoryList")) || []
  );
  const [searchList, setSearchList] = useState([])
  const handleSearch = (value) => {
    const data = [...new Set([value, ...searchHistoryList])];
    setSearchHistoryList(data);
    localStorage.setItem("searchHistoryList", JSON.stringify(data));


    getSearchList(value)
  };

  const getSearchList = async (wd) => {
    const resp = await axios.get("/api/list", { params: { wd } });
    console.log(resp.data.data);
    setSearchList(resp.data.data)
  };

  return (
    <div>
      <Search onSearch={(value) => handleSearch(value)}></Search>
      {/* 搜索历史记录 */}
      <div className="cord">
        <h3>
          <span>历史记录</span>
          <span>X</span>
        </h3>
        <Space className="content">
          {searchHistoryList.map((v, i) => {
            return <Tag key={i}>{v}</Tag>;
          })}
        </Space>
      </div>

      <div>
        {
          searchList.map(v => {
            return <dl>
              <dt>
                <img src={v.image} alt="" />
              </dt>
              <dd>
                <h3>{v.title}</h3>
              </dd>
            </dl>
          })
        }
      </div>
    </div>
  );
};

export default Search1;
